<template>
  <div class="airPort">
    <!-- 卡片 -->
    <el-form size="mini">
      <div style="display:flex">
        <el-form-item label="机场三字码" prop="name" style="display: flex; margin: 0 20px 20px 0">
          <el-input v-model="airportId"></el-input>
        </el-form-item>
        <el-form-item label="航站楼全称" prop="name" style="display: flex; margin: 0 20px 20px 0">
          <el-input v-model="terminalAllname"></el-input>
        </el-form-item>
      </div>

      <div style="display:flex;margin:0 0 20px 0">
        <el-form-item label="创建时间" style="display: flex; margin: 0 20px 0 0">
          <el-date-picker v-model.trim="time" :value-format="format" size="mini" type="datetime" placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item label="至" style="display: flex; margin: 0 20px 0 0">
          <el-date-picker v-model.trim="timeBack" :value-format="format" size="mini" type="datetime"
            placeholder="选择日期时间">
          </el-date-picker>
        </el-form-item>
        <el-form-item style="margin: 0 20px 0 50px;">
          <el-button type="primary" size="mini" @click="seachBtn">查询</el-button>
          <el-button type="primary" size="mini" @click="dialogVisibleadd">新增</el-button>
        </el-form-item>
      </div>

    </el-form>
    <!-- 用户列表区 -->
    <el-table size="mini" :header-cell-style="{
        color: '#fff',
        background: '#6090EC',
        fontSize: '11px',
        fontWeight: 'normal',
      }" id="tableTop" :data="flightTerminallists" border stripe>
      <el-table-column label="机场三字码" prop="airportId"></el-table-column>
      <el-table-column label="航站楼全称" prop="terminalAllname"></el-table-column>
      <el-table-column label="航站楼简称" prop="terminalName"></el-table-column>
      <el-table-column label="经纬度" prop="coordinatesgd"></el-table-column>
      <el-table-column label="创建时间" prop="createTime"></el-table-column>

      <el-table-column label="操作" width="180px">
        <template slot-scope="scope">
          <el-button type="primary" size="mini" @click="delcomfig(scope.row)">删除</el-button>
          <el-button type="primary" size="mini" @click="modifyairPort(scope.row)">修改</el-button>
        </template>
      </el-table-column>
    </el-table>
    <!-- 新增 -->
    <el-dialog title="新增航站楼" :visible.sync="dialogVisible" :close-on-click-modal="false" width="40%">
      <el-form ref="ruleForm" :model="addTerminal" class="demo-form-inline" :rules="rules">
        <el-form-item label="机场三字码 ：" prop="airportId">
          <el-input v-model="addTerminal.airportId" size="mini" style="width: 400px" placeholder="机场三字码"></el-input>
        </el-form-item>
        <el-form-item label="航站楼简称	 ：" prop="terminalName">
          <el-input style="width: 400px" v-model="addTerminal.terminalName" size="mini" placeholder="航站楼简称	"></el-input>
        </el-form-item>
        <el-form-item label="航站楼全称	 ：" prop="terminalAllname">
          <el-input style="width: 400px" v-model="addTerminal.terminalAllname" size="mini" placeholder="航站楼全称	">
          </el-input>
        </el-form-item>
        <el-form-item label="经度,纬度	：" prop="coordinatesgd">
          <el-input style="width: 400px" v-model="addTerminal.coordinatesgd" size="mini" placeholder="经度,纬度"></el-input>
        </el-form-item>
        <el-form-item label="经度,纬度	：">
          <div style="display: flex">
            <div>坐标拾取地址</div>
            <a href=" http://lbs.amap.com/console/show/picker" target="_blank">
              http://lbs.amap.com/console/show/picker</a>
          </div>
        </el-form-item>
        <div style="display:flex">
          <el-button type="primary" size="mini" style="margin-left: 40%" @click="determineterminal('ruleForm')">提交
          </el-button>
          <el-button type="primary" size="mini" @click="cancelEdit()">取消</el-button>
        </div>

      </el-form>
    </el-dialog>
    <!-- 修改 -->
    <!-- <el-dialog title="修改航站楼" :visible.sync="editdialogVisible" width="40%">
      <el-form :model="editTerminal" class="demo-form-inline" :rules="rules">
        <el-form-item label="机场三字码 ：" prop="airportId">
          <el-input
            v-model="editTerminal.airportId"
            size="mini"
            style="width: 400px"
            placeholder="机场三字码"
          ></el-input>
        </el-form-item>
        <el-form-item label="航站楼简称	 ：" prop="jc">
          <el-input
            style="width: 400px"
            v-model="editTerminal.terminalName"
            size="mini"
            placeholder="航站楼简称	"
          ></el-input>
        </el-form-item>
        <el-form-item label="航站楼全称	 ：" prop="qc">
          <el-input
            style="width: 400px"
            v-model="editTerminal.terminalAllname"
            size="mini"
            placeholder="航站楼全称	"
          ></el-input>
        </el-form-item>
        <el-form-item label="经度,纬度	：" prop="jwd">
          <el-input
            style="width: 400px"
            v-model="editTerminal.coordinatesgd"
            size="mini"
            placeholder="经度,纬度"
          ></el-input>
        </el-form-item>
        <el-form-item label="经度,纬度	：" prop="gsjc">
          <div style="display: flex">
            <div>坐标拾取地址</div>
            <a href=" http://lbs.amap.com/console/show/picker">
              http://lbs.amap.com/console/show/picker</a
            >
          </div>
        </el-form-item>
        <el-button
          type="primary"
          size="mini"
          style="margin-left: 250px"
          @click="geteditflightTerminal()"
          >提交</el-button
        >
      </el-form>
    </el-dialog> -->
    <!-- 确认删除 -->
    <el-dialog title="提示" :visible.sync="comfigdelDialogVisible" :close-on-click-modal="false" width="30%" center>
      <span>确认删除此条数据吗</span>
      <span slot="footer" class="dialog-footer">
        <el-button @click="comfigdelDialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="getdeleteTerminalById()">确 定</el-button>
      </span>
    </el-dialog>
    <!-- 分页 -->
    <el-pagination @size-change="handleSizeChange" @current-change="handleCurrentChange" :current-page="currentPage"
      :page-sizes="[10, 15, 20]" :page-size="pageSize" layout="total, sizes, prev, pager, next, jumper"
      :total="pageTotal">
    </el-pagination>
  </div>
</template>

<script>
  export default {
    data() {
      return {
        terminalAllname: "",
        timeBack: "",
        time: "",
        // 新增弹窗
        dialogVisible: false,
        comfigdelDialogVisible: false, //删除弹窗
        editdialogVisible: false, //修改弹窗

        //分页
        pageSize: 10,
        currentPage: 1,
        pageTotal: 0,

        // 时间校验
        format: "yyyy-MM-dd",
        // 新增校验
        rules: {
          terminalName: [{
            required: true,
            message: "请输入机场简称",
            trigger: "blur"
          }, ],
          airportId: [{
            required: true,
            message: "请输入机场三字码",
            trigger: "blur"
          }, ],
          terminalAllname: [{
            required: true,
            message: "请输入机场全称",
            trigger: "blur"
          }, ],
          coordinatesgd: [{
            required: true,
            message: "请输入机场经纬度",
            trigger: "blur"
          }, ],
        },
        // 机场三字码
        airportId: "",
        // 删除使用主键id
        terminalId: "",

        //航站楼列表数据
        flightTerminallists: [],
        // 新增航站楼数据
        addTerminal: {
          airportId: "", //机场三字码
          terminalName: "", //航站楼名称
          terminalAllname: "", //航站楼全程名称
          coordinatesgd: "", //航站楼经纬度高德版
          // createTime:"",//创建时间
          terminalId: "",
        },
      };
    },

    methods: {
      // 新增按钮
      dialogVisibleadd() {

        let form = this.addTerminal
        Object.keys(form).forEach(key => (form[key] = ''));
        this.getflightTerminallist()
        this.dialogVisible = true

      },
      // 修改
      modifyairPort(row) {
        console.log(row);
        this.addTerminal = row;
        console.log(this.addTerminal);
        console.log(this.addTerminal.terminalId);

        this.dialogVisible = true;
      },
      // 确认删除事件
      delcomfig(row) {
        this.comfigdelDialogVisible = true;
        console.log(row);
        this.terminalId = row.terminalId;
      },
      //分页
      handleSizeChange(value) {
        console.log("1", value);
        localStorage.setItem("pageSize", value);
        localStorage.setItem("pageNum", 1);
        this.getflightTerminallist();
        this.pageSize = value;
      },
      handleCurrentChange(value) {
        console.log("2", value);

        localStorage.setItem("pageNum", value);
        localStorage.setItem("pageSize", this.pageSize);
        this.getflightTerminallist();
      },
      
        cancelEdit(){
        this.dialogVisible = false 
        this.seachBtn()
      },
      // 航站楼列表接口
      getflightTerminallist() {
        this.$axios
          .getflightTerminallist({
            airportId: this.airportId, //机场三字码
            createEndDate: this.timeBack,
            createDate: this.time,
            terminalAllname: this.terminalAllname
          })
          .then((res) => {
            console.log(res);
            // debugger
            if (res.code == "200") {
              this.flightTerminallists = res.data;
              this.pageTotal = res.total;
            }
          });
      },
      seachBtn(){
           localStorage.setItem("pageSize", 10);
        localStorage.setItem("pageNum", 1);
        this.getflightTerminallist()
      },
      // 新增航站楼接口getaddflightTerminal
      getaddflightTerminal() {
        if (
          this.addTerminal.airportId != "" &&
          this.addTerminal.terminalName != "" &&
          this.addTerminal.terminalAllname != "" &&
          this.addTerminal.coordinatesgd != ""
        ) {
          this.$axios
            .getaddflightTerminal({
              airportId: this.addTerminal.airportId, //机场三字码
              terminalName: this.addTerminal.terminalName, //航站楼名称
              terminalAllname: this.addTerminal.terminalAllname, //航站楼全程名称
              coordinatesgd: this.addTerminal.coordinatesgd, //航站楼经纬度高德版
            })
            .then((res) => {
              console.log(res);
              // debugger
              if (res.code == "200") {
                this.dialogVisible = false;
                this.getflightTerminallist();
                this.$message({
                  message: "新增成功",
                  type: "success",
                });
              }
            });
        } else {
          this.$message.error("请认真填写添加航站楼信息");
        }
      },
      // 删除航站楼接口
      getdeleteTerminalById() {
        this.$axios
          .getdeleteTerminalById({
            terminalId: this.terminalId,
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              this.comfigdelDialogVisible = false;
              this.getflightTerminallist();

              this.$message({
                message: "删除成功",
                type: "success",
              });
            }
          });
      },
      // 修改航站楼接口
      geteditflightTerminal() {
        this.$axios
          .geteditflightTerminal({
            terminalId: this.addTerminal.terminalId,
            airportId: this.addTerminal.airportId, //机场三字码
            terminalName: this.addTerminal.terminalName, //航站楼名称
            terminalAllname: this.addTerminal.terminalAllname, //航站楼全程名称
            coordinatesgd: this.addTerminal.coordinatesgd, //航站楼经纬度高德版
          })
          .then((res) => {
            console.log(res);
            if (res.code == "200") {
              this.getflightTerminallist();
              this.dialogVisible = false;
              this.addTerminal = ""

              this.$message({
                message: "修改成功",
                type: "success",
              });
            }
          });
      },
      // 新增保存按钮
      determineterminal(formName) {
        this.$refs[formName].validate((valid) => {
          if (valid) {
            if (this.addTerminal.terminalId == "") {
              this.getaddflightTerminal();
              console.log(1);
            } else {
              this.geteditflightTerminal();
              console.log(2);
            }
          } else {
            console.log("error submit!!");
            return false;
          }
        });
      },
    },

    mounted() {
      this.getflightTerminallist();
    },
  };
</script>
<style scoped>
  el-table-column {
    background-color: #f2f2f2;
  }

  #searchBtn {
    background-color: #54dac9;
    color: #fff;
  }

  .airPort {
    margin: 20px;
  }
</style>